<template>
    <view class="page-me position-r">
        <view class="page-me__bg full-w position-a"></view>
        <view class="page-me__header position-r pd-v-48">
            <view class="flex flex-center ">
                <view class="flex flex-1 flex-center" >
                    <image class="avatar border100 mr-r-16" mode="widthFix" :src="store?.user?.userInfo?.userAvatar ? getFileUrl(store?.user?.userInfo?.userAvatar) : '../../static/avatar.png'" @click="informationUpdate" />
                    <view class="flex-1 font36 lh-50 bold color-white" v-if="store?.user?.token" >{{ store?.user?.userInfo?.nikeName }}</view>
                    <view class="flex-1 font36 lh-50 bold color-white" v-else  @click="login">
                        请登录
                    </view>
                </view>

                <view class="pd-v-20 pd-h-20" @click="message">
                    <u-icon name="volume-fill" color="#fff" size="20"></u-icon>
                </view>
                  
            </view>
              
                
        </view>
        
          
        <view class="page-me__body position-r mr-t-48 mr-v-24">
            
            
            <view class="flex bg-white border8">
                <view class="flex-1 pd-h-20" @click="wallet">
                    <view class="flex flex-ver flex-center flex-j-center">
                        <view class="font48 lh-66 bold color-default">
                            {{balance}}
                        </view>
                        <view class="font26 lh-36 color-note">
                            钱包余额
                        </view>
                    </view>
                      
                </view>
                <view class="flex-1 pd-h-20" @click="collect">
                    <view class="flex flex-ver flex-center flex-j-center">
                        <view class="font48 lh-66 bold color-default">
                            {{collectNum}}
                        </view>
                        <view class="font26 lh-36 color-note">
                            我的收藏
                        </view>
                    </view>
                      
                </view>
                  
            </view>
            <view class="bg-white border8  pd-v-16 mr-t-20">
                <view class="flex pd-h-40 flex-center border-b" @click="join">
                    <image class="mr-r-24" style="width:48rpx" mode="widthFix" src="@/static/join_us.png"/>
                    <view class="flex-1 flex flex-center">
                        <view class="flex-1 font32 lh-48 color-default">
                            申请加盟
                        </view>
                        <u-icon name="arrow-right" size="14" color="#AAAAAA"></u-icon>
                    </view>
                    
                </view>

                <view class="flex pd-h-40 flex-center border-b" @click="about">
                    <image class="mr-r-24" style="width:48rpx" mode="widthFix" src="@/static/about.png"/>
                    <view class="flex-1 flex flex-center">
                        <view class="flex-1 font32 lh-48 color-default">
                            关于我们
                        </view>

                        <image src="@/static/logo_icon.png" style="width:48rpx" mode="widthFix" class="mr-r-12"></image>
                        <u-icon name="arrow-right" size="14" color="#AAAAAA"></u-icon>
                    </view>
                    
                </view>

                <view class="flex pd-h-40 flex-center border-b" @click="proxyLogin">
                    <image class="mr-r-24" style="width:48rpx" mode="widthFix" src="@/static/proxy.png"/>
                    <view class="flex-1 flex flex-center">
                        <view class="flex-1 font32 lh-48 color-default">
                            切换代理商
                        </view>
                        <u-icon name="arrow-right" size="14" color="#AAAAAA"></u-icon>
                    </view>
                    
                </view>

                <view class="flex pd-h-40 flex-center" @click="shopLogin">
                    <image class="mr-r-24" style="width:48rpx" mode="widthFix" src="@/static/shop.png"/>
                    <view class="flex-1 flex flex-center">
                        <view class="flex-1 font32 lh-48 color-default">
                            切换商户端
                        </view>
                        <u-icon name="arrow-right" size="14" color="#AAAAAA"></u-icon>
                    </view>
                    
                </view>
            </view>
              
            
              
        </view>
          

        <tab></tab>
          
    </view>
</template>

<script setup>
import { useStore } from '@/store/index.js';
import { ref, reactive, onMounted, nextTick } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';

import tab from '@/components/tab.vue'
import { walletBalance,collectList } from '@/api/user.js'
import { fileUrl } from '@/utils/index.js'

const store = useStore();
const balance = ref(0)
const collectNum = ref(0)

onShow(() => {
    console.log(store.user) 
    if(store?.user?.token) {
        getWalletBalance()
        getCollectList()
    }
})



onLoad(() => {
    console.log(store.user)

})


const getFileUrl = (avatar) => {
    console.log(avatar,'avatar')
    return fileUrl(avatar)
}

const getWalletBalance = () => {
    walletBalance().then(res => {
        console.log(res)
        if(res.code == 200) {
            balance.value = res.data
        }
    })
}

const getCollectList = () => {
    collectList({
        page: 1,
        pageSize: 1
    }).then(res => {
        console.log(res)
        if(res.code == 200) {
            collectNum.value = res.total
        }
    })
}

const login = () => {
    uni.navigateTo({
        url: '/sub_user/pages/login/login'
    })
}

const message = () => {
    if(!store?.user?.token) {
        uni.navigateTo({
            url: '/sub_user/pages/login/login'
        })
        return
    }
    uni.navigateTo({
        url: '/sub_user/pages/messageList/messageList'
    })
}

const informationUpdate = () => {
    if(!store?.user?.token) {
        uni.navigateTo({
            url: '/sub_user/pages/login/login'
        })
        return
    }
    uni.navigateTo({
        url: '/sub_user/pages/informationUpdate/informationUpdate'
    })
}

const join = () => {
    uni.navigateTo({
        url: '/sub_user/pages/join/join'
    })
}

const collect = () => {
    if(!store?.user?.token) {
        uni.navigateTo({
            url: '/sub_user/pages/login/login'
        })
        return
    }
    uni.navigateTo({
        url: '/sub_user/pages/collect/collect'
    })
}

const wallet = () => {
    if(!store?.user?.token) {
        uni.navigateTo({
            url: '/sub_user/pages/login/login'
        })
        return
    }
    uni.navigateTo({
        url: '/sub_user/pages/wallet/wallet'
    })
}

const about = () => {
    uni.navigateTo({
        url: '/sub_user/pages/about/about'
    })
}

const proxyLogin = () => {
    uni.navigateTo({
        url: '/sub_proxy/pages/login/login'
    })
}

const shopLogin = () => {
    uni.navigateTo({
        url: '/sub_shop/pages/login/login'
    })
}

</script>

<style scoped lang="scss">
.page-me {
    background: #F7F7F7;
    min-height:100vh;

    .page-me__bg {
        height:404rpx;
        left:0;
        top:0;
        background: linear-gradient( 42deg, #7DE55B 0%, #39AAD1 100%);
        z-index: 1;
    }

    .page-me__header {
        z-index: 2;
        padding-top:176rpx;

        .avatar {
            width: 108rpx;
            height:108rpx;
        }
    }

    .page-me__body {
        z-index: 2;

        .border-b {
            border-bottom: 1px solid #E4F2EC;
        }
    }
}
</style>
